<template>
  <div class="phoneList">
    <ul>
      <li v-for="item in list" :key="item.product_id">
        <router-link :to="{path:'/detail',query:{productID: item.product_id}}">
          <img :src="'http://106.15.179.105:3000/'+item.product_picture" alt="">
          <h3>{{item.product_name}}</h3>
          <h4>{{item.product_title}}</h4>
          <p>
            <span class="add">{{item.product_selling_price}}元</span>
            <span class="del">{{item.product_price}}元</span>
          </p>
        </router-link>
      </li>
      <li v-show="isMore && list.length>=1" @click="checkMore">
        <router-link to id="app">浏览更多 》</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "isMore"],
  data() {
    return {};
  },
  computed: {
    categoryArr() {
      let categoryID = [];
      this.list.forEach(item => {
        if (!categoryID.includes(item.category_id)) {
          categoryID.push(item.category_id);
        }
      });
      return categoryID;
    }
  },
  methods: {
    checkMore() {
      this.$globalData.$categoryArr = this.categoryArr;
      this.$router.push({
        path: "/goods",
        query: {
          categoryID: this.categoryArr
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.phoneList li {
  width: 230px;
  height: 280px;
  padding: 10px 0;
  float: left;
  background-color: #fff;
  margin: 0 0 15px 17px;
  text-align: center;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
}
.phoneList li:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.phoneList ul li img {
  width: 160px;
  height: 160px;
}
.phoneList ul li h3 {
  font-size: 14px;
  margin: 8px 10px;
  color: black;
}
.phoneList ul li h4 {
  font-size: 11px;
  margin: 8px 10px;
  color: #cccccc;
}
.add {
  color: #ff6700;
}
.del {
  color: #cccccc;
  margin-left: 8px;
  text-decoration: line-through;
}
#app {
  text-align: center;
  font-size: 20px;
  line-height: 280px;
  color: #333;
}
</style>